<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html" class="loginHtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--<link rel="icon" href="/resources/favicon.ico">-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">

</head>
<body class="loginBody">
<div name="registerForm" class="layui-form" style="height: 470px; width: 330px" >
    <div class="login_face">
        <img src="/images/login.jpg" height="60px" class="userAvatar">
    </div>
    <div>
        <div class="loginbox-title">注册</div>

        <div class="layui-form-item input-item">
            <label>用户名</label>
            <input th:value="${registerUser.username}" id="username" required="required" type="text" placeholder="请输入用户名" autocomplete="off" name="username" class="layui-input" lay-verify="required">
        </div>
        <div class="layui-form-item input-item">
            <label>密码</label>
            <input th:value="${registerUser.password}" id="password" required="required" type="password" placeholder="请输入密码" autocomplete="off" name="password" class="layui-input" lay-verify="required">
        </div>
        <div class="layui-form-item input-item">
            <label>确认密码</label>
            <input th:value="${registerUser.againPassword}" id="againPassword" required="required" type="password" placeholder="再次输入密码" autocomplete="off" name="againPassword" class="layui-input" lay-verify="required">
        </div>
        <div class="layui-form-item input-item">
            <label>邮箱</label>
            <input th:value="${registerUser.email}" id="email" required="required" type="email" placeholder="请输入邮箱" autocomplete="off" name="email" class="layui-input" lay-verify="required">
        </div>
        <div>
            <button class="layui-btn layui-btn-sm" onclick="sendCode()">发送验证码</button>
        </div>
        <div class="layui-form-item input-item">
            <label>验证码</label>
            <input th:value="${registerUser.code}" id="code" type="text" required="required" placeholder="请输入验证码" autocomplete="off" name="code" class="layui-input">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-block" onclick="submit()">注册</button>
        </div>
        <a th:href="@{/}" style="color: #1abc9c">返回</a>
    </div>
</div>

</body>

<script>
    function sendCode(){
        $.get({
            url:"/chen/register/sendCode",
            data: {
                "email":$("#email").val(),
            },
            dataType:"text",
            success:function (data){
                layer.msg(data)
            },
            error:function (data){
                layer.msg(data)
            }
        })
    }

    function submit(){
        $.get({
            url:"/chen/register/submit",
            data: {
                "username":$("#username").val(),
                "password":$("#password").val(),
                "againPassword":$("#againPassword").val(),
                "email":$("#email").val(),
                "code":$("#code").val(),
            },
            dataType:"text",
            success:function (data){
                layer.msg(data)
                if(data === 'success'){
                    alert("注册成功！")
                    location.href="/chen"
                }
            },
            error:function (data){
                layer.msg(data)
            }
        })
    }

</script>

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/cache.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.6.1.min.js}"></script>

</html>
